<template>
  <zm-view background="#f4f6f7">
    <view class="search-wrap">
      <u-search v-model="search" placeholder="输入城市名或拼音" bg-color="#ffffff" height="62rpx" :show-action="false" @input="handleSearchInput"></u-search>
    </view>
    <u-index-list :index-list="indexList" index-font-size="20rpx" inactive-color="#999999">
      <u-index-item v-if="location && type == 'cinema'">
        <u-index-anchor text="当前定位" bg-color="#f4f6f7" height="80rpx"></u-index-anchor>
        <view class="grid grid-cols-4 gap-16 px-24">
          <view class="city-btn city-btn--active" @click="handleClickCurrend">{{ location.cityName }}</view>
          <view></view>
          <view></view>
          <view class="flex items-center justify-end click-animation" @click="handleClickGetLocation">
            <u-icon name="map"></u-icon>
            <text class="ml-4">{{ isLocationing ? "定位中..." : "重新定位" }} </text>
          </view>
        </view>
      </u-index-item>
      <u-index-item v-if="cityRecord.length && type == 'cinema'">
        <u-index-anchor text="历史城市" bg-color="#f4f6f7" height="80rpx"></u-index-anchor>
        <view class="grid grid-cols-4 gap-16 px-24">
          <view v-for="(city, index) in cityRecord" :key="index" class="city-btn" @click="handleClickRecordCity(city)">
            <text class="text-row-1">{{ city.cityName }}</text>
          </view>
        </view>
      </u-index-item>
      <u-index-item v-if="type == 'cinema'">
        <u-index-anchor text="最近热门" bg-color="#f4f6f7" height="80rpx"></u-index-anchor>
        <view class="grid grid-cols-4 gap-16 px-24 pb-24">
          <view v-for="(city, index) in hotCitys" :key="index" class="city-btn" @click="handleSetCity(city)">
            <text class="text-row-1">{{ city.regionName }}</text>
          </view>
        </view>
      </u-index-item>
      <u-index-item v-for="(group, index) in cityGroup" :key="index">
        <u-index-anchor :text="group.initials" bg-color="#f4f6f7" size="22rpx"></u-index-anchor>
        <view v-for="(city, cityIndex) in group.list" :key="cityIndex" class="city-cell" hover-class="opacity-6" @click="handleSetCity(city)">
          <text class="text-row-1">{{ city.regionName }}</text>
        </view>
      </u-index-item>
    </u-index-list>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import { mapGetters } from "vuex"
export default {
  mixins: [page],
  data() {
    return {
      type: "cinema", // cinema、mall
      mallCommodityId: "",
      search: "",
      citys: [],
      hotCitys: [],
      indexList: [],
      cityGroup: [],
      isLocationing: false
    }
  },
  computed: {
    ...mapGetters(["location", "cityCode", "cityName", "cityRecord"])
  },
  onLoad(options) {
    this.type = options.type || "cinema"
    if (this.type == "mall") {
      this.mallCommodityId = options.mallCommodityId
      this.handleMallCitys()
    } else {
      this.handleGetCitys()
    }
  },
  methods: {
    // 加载影城城市数据
    handleGetCitys() {
      uni.$api.cinema.cityList().then((res) => {
        this.citys = res
        this.hotCitys = res.filter((item) => item.isHot === 1)
        this.handleFilter()
      })
    },
    // 加载卖品城市数据
    handleMallCitys() {
      uni.$api.mall.getCommodityCityList({ mallCommodityId: this.mallCommodityId }).then((res) => {
        this.citys = res
        this.handleFilter()
      })
    },
    handleIndexList(list = []) {
      let indexList = []
      if (this.type == "cinema") {
        indexList = ["热门", ...list]
        if (!uni.$check.isEmpty(this.cityRecord)) {
          indexList.unshift("历史")
        }
        if (!uni.$check.isEmpty(this.location)) {
          indexList.unshift("当前")
        }
      } else {
        indexList = [...list]
      }
      this.indexList = indexList
    },
    handleFilter() {
      if (this.search) {
        const filterCitys = this.citys.filter((city) => Object.values(city).some((item) => String(item)?.includes(this.search)))
        const indexs = [...new Set(filterCitys.map((item) => item.initials))].sort()
        this.handleIndexList(indexs)
        this.cityGroup = indexs.map((initials) => {
          return { initials, list: filterCitys.filter((city) => city.initials === initials) }
        })
      } else {
        const indexs = [...new Set(this.citys.map((item) => item.initials))].sort()
        this.handleIndexList(indexs)
        this.cityGroup = indexs.map((initials) => {
          return { initials, list: this.citys.filter((city) => city.initials === initials) }
        })
      }
    },
    handleSearchInput() {
      uni.$debounce(() => this.handleFilter())
    },
    handleSetCity(item) {
      if (this.type == "cinema") {
        this.$store.commit("SET_CITY_CODE", item.cityId)
        this.$store.commit("SET_CITY_NAME", item.regionName)
        this.$store.commit("SET_USER_CITY_INFO", { cityCode: item.cityId, cityName: item.regionName })
        this.$store.commit("SET_CITY_RECORD", {
          cityCode: item.cityId,
          cityName: item.regionName
        })
      } else {
        uni.$emit("mall-city", item)
      }
      uni.navigateBack()
    },
    handleClickRecordCity(data) {
      this.handleSetCity({
        cityId: data.cityCode,
        regionName: data.cityName
      })
    },
    handleClickCurrend() {
      this.handleSetCity({
        cityId: this.location.cityCode,
        regionName: this.location.cityName
      })
    },
    async handleClickGetLocation() {
      this.isLocationing = true
      await this.$store.dispatch("getLocation")
      this.isLocationing = false
    }
  }
}
</script>

<style lang="scss" scoped>
.search-wrap {
  padding: 24rpx;
  padding-bottom: 0;
}
.city-btn {
  height: 60rpx;
  padding: 0 10rpx;
  line-height: 60rpx;
  white-space: nowrap;
  background: #ffffff;
  border-radius: 6rpx;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  border: 1rpx solid #fff;
  &--active {
    color: $theme-color;
    border-color: $theme-color;
  }
}
.city-cell {
  font-size: 26rpx;
  padding: 14rpx 24rpx;
  position: relative;
  background-color: #fff;
  &::after {
    content: "";
    left: 24rpx;
    right: 24rpx;
    bottom: 0;
    position: absolute;
    border-bottom: 2rpx solid #f4f6f7;
  }
}
</style>
